<template>
<div class="SerachResult">
  <h3>最佳匹配</h3>
   <ul class="songlist">
      <template v-if="song.length!=0">
        <li v-for="item in song" :key='item.id' @click="$emit('play',item)">
          <div class="left">
            <h5 v-html="$options.filters.heigLight(item.name,inp)"></h5>
            <p>
              <i v-show="item.song&&item.song.privilege&&item.song.privilege.playMaxbr==999000" class="sq"></i>
              <span v-if="item.artists"  v-html="$options.filters.heigLight(item.artists[0].name,inp)"></span> {{item.name}}</p>
          </div>
          <div class="right"><a class="playBtn"    href="javascript:;"></a></div>
        </li>
    </template>
  </ul>
</div>
   

</template>
<script>
export default {
  name:"SerachResult",
  props:['inp'],
  data(){
    return{
      song:[]
    }
  },
  filters:{
    addZero(val){
      return val<10?'0'+val:val
    },
    heigLight(value,inp){
      return String(value).replace(inp,'<span style="color:#EE6A22">'+inp+'</span>')
    }
  },
  created(){
    this.$http.get('/search',{
      params:{
        keywords:this.inp,
      }
    }).then(d=>{
      this.song =d.data.result.songs
    })
  }
}
</script>
<style lang="less" scoped>
.SerachResult{
  h3{
    margin-left: 10px;
    font-size: 12px;
    line-height: 16px;
    color: #666;
    font-weight: 400;
  }
}
.songlist{
   overflow: hidden;
    white-space: nowrap;
      text-overflow: ellipsis;
  li{
     padding: 6px 0px;
     display: flex;
     border: 0px solid transparent;
     border-bottom: 1px solid #F4F4F4;
     padding-left: 10px;
     i{
       font-style: normal;
       line-height: 42px;
     }
     i.red{
       color:#dd001b;
     }
     .left{
       flex: 1;
       padding-left: 5px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       h5{
         font-size: 17px;
         font-weight: 400;
       }
       p{
          font-size: 12px;
          color: #888;
          i.sq{
            display: inline-block;
            width: 12px;
            height: 8px;
            margin-right: 4px;
            background: url('../assets/index_icon_2x.png') no-repeat;
            background-position: 0 0;
            background-size: 166px 97px;
          }
       }
      }
     .right{
        width: 22px;
        height: 42px;
        padding: 0px 10px;
        display: flex;
        align-items: center;
        .playBtn{
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url('../assets/index_icon_2x.png') no-repeat;
          background-position: -24px 0;
          background-size: 166px 97px;

        }
    }
  } 
 
  
}

</style>